
const LEFT_WIDTH = 'LEFT_WIDTH';


class SplitBar {
  isShow = true;
  parentSelector = '.manual-body';
  $bodyDom = null;
  $leftDom = null;
  $rightDom = null;
  $vsplitbar = null;

  /**
   * 初始化分割条
   */
  createSingletonSlider() {
    if ($('#manual-vsplitbar')[0]) {
      this.$vsplitbar = $('#manual-vsplitbar');
    } else {
      this.$vsplitbar = $('\
                    <div id="manual-vsplitbar" unselectable="on"\
                    style="\
                        z-index:1888;\
                        position: absolute;\
                        user-select: none;\
                        cursor: col-resize;\
                        height: 100%;\
                        display: block;\
                        background: #ddd;\
                        top: 0px;\
                        width: 3px;">\
                        <a href="javascript:void(0)" accesskey="" tabindex="0" title="vsplitbar"></a>\
                    </div>\
                ');
      $(this.parentSelector)
        .append(this.$vsplitbar);
    }

    return this.$vsplitbar;
  }

  //新增一个遮罩层 放在iframe 之上  因为mousemove到 iframe的时候失效
  createMark() {
    if (!$('#splitbar-mark')[0]) {
      $(document.documentElement).append($(`<div id="splitbar-mark"  style="width: 100%;height: 100%;height: 100%;position: absolute;left: 0px;top: 0px;"></div>`));
    }

  }

  removeMark() {
    $('#splitbar-mark').remove();
  }

  constructor(isShow) {
    this.isShow = isShow;
    var self = this;

    this.$bodyDom = $('.manual-body');
    this.$leftDom = $(self.parentSelector).find('.manual-left');
    this.$rightDom = $(self.parentSelector).find('.manual-right');

    this.adaptLeftPosition();


    this.onmousedown = this.onmousedown.bind(this);
    this.onmousemove = this.onmousemove.bind(this);
    this.onmouseup = this.onmouseup.bind(this);


    if (isShow) {
      this.show();
    }

  }


  disX = null;
  firstLeft = null;

  onmousemove(e) {
    var bodyEle = jQuery('.manual-body')[0];
    var leftPane = jQuery('.manual-left')[0];
    var $splitBar = jQuery('#manual-vsplitbar')[0];
    var rightPane = jQuery('.manual-right')[0];

    var allWidth = jQuery('.manual-body').width();

    var curPos = this.firstLeft + ((e || event).clientX - this.disX);
    var maxPos = bodyEle.clientWidth - $splitBar.offsetWidth;

    curPos > maxPos && (curPos = maxPos);
    curPos < 140 && (curPos = 140);


    // console.log("curPos", curPos);


    this.$leftDom.width(curPos + 'px');
    this.$vsplitbar.css({ 'left': curPos + 'px' });
    this.$rightDom.css({ 'left': curPos + 3 + 'px' });
    this.$rightDom.width((allWidth - curPos - 3) + 'px');


    localStorage.setItem(LEFT_WIDTH, curPos);


    return false;
  }

  onmouseup(e) {
    this.removeMark();
    document.removeEventListener('mousemove', this.onmousemove);
    document.removeEventListener('mouseup', this.onmouseup);

  };


  onmousedown(e) {
    this.disX = (e || event).clientX;
    this.firstLeft = this.$vsplitbar[0].offsetLeft;

    this.createMark();


    document.removeEventListener('mousemove', this.onmousemove);
    document.addEventListener('mousemove', this.onmousemove);

    document.removeEventListener('mouseup', this.onmouseup);
    document.addEventListener('mouseup', this.onmouseup);
    return false;
  }


  initEvent() {
    $('#manual-vsplitbar').unbind('mousedown', this.onmousedown);
    $('#manual-vsplitbar').on('mousedown', this.onmousedown);
  }


  adaptLeftPosition() {
    var leftWidth = parseFloat(localStorage.getItem(LEFT_WIDTH)) || 222;
    var allWidth = this.$bodyDom.width();
    if (this.$leftDom && this.$leftDom[0] && this.$rightDom&&this.$rightDom[0]) {
      this.$leftDom[0].style.width = `${leftWidth}px`;
      this.$rightDom[0].style.left = `${leftWidth}px`;
      this.$rightDom[0].style.width = `${allWidth - leftWidth}px`;
    }

  }

  show() {
    this.isShow = true;

    this.createSingletonSlider();


    this.adaptLeftPosition();


    var left = parseFloat(this.$leftDom[0].offsetWidth) || 223;

    this.$vsplitbar
      .css({ left: left })
      .hover(
        function (event) {
          event.target.style.background = '#8f949ad8';
        },
        function (event) {
          event.target.style.background = '';
        },
      );


    //初始化事件
    this.initEvent();
  }

  hide() {
    //localStorage.setItem(LEFT_WIDTH, 0)
    this.$vsplitbar && this.$vsplitbar.remove();
  }
}

export function init(isShow) {
  return new SplitBar(isShow);
}
